<!-- 工单列表 -->
<template>
  <div class="dd">
    <div class="btnList">
      <el-form label-position="right" :model="ruleForm" ref="ruleForm">
        <el-form-item label="工单来源" prop="gdly">
          <el-select v-model="ruleForm.region" placeholder="请选择工单来源">
            <el-option label="来源一" value="ly1"></el-option>
            <el-option label="来源二" value="ly2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="故障区域" prop="gzqy">
          <el-select v-model="ruleForm.region" placeholder="请选择故障区域">
            <el-option label="区域一" value="ly1"></el-option>
            <el-option label="区域二" value="ly2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="故障设备" prop="gzsb">
          <el-select v-model="ruleForm.region" placeholder="请选择故障设备">
            <el-option label="设备一" value="ly1"></el-option>
            <el-option label="设备二" value="ly2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工单响应状态" prop="gzsb">
          <el-select v-model="ruleForm.gdzt" placeholder="请选择工单状态">
            <el-option label="状态一" value="zt1"></el-option>
            <el-option label="状态二" value="zt2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="故障发生时间" prop="gzsb">
          <el-date-picker
            v-model="ruleForm.value1"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
          至
          <el-date-picker
            v-model="ruleForm.value2"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="searchNow">立即查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="工单编号" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="故障区域" >
        </el-table-column>
        <el-table-column prop="address" label="工单来源" width="120" show-overflow-tooltip>
        </el-table-column>
				<el-table-column prop="name" label="发生位置" >
        </el-table-column>
				<el-table-column prop="name" label="故障发生时间" width="120">
        </el-table-column>
				<el-table-column prop="name" label="故障设备" width="120">
        </el-table-column>
				<el-table-column prop="name" label="上报人" width="120">
        </el-table-column>
				<el-table-column prop="name" label="故障状态" width="120">
        </el-table-column>
				<el-table-column prop="name" label="故障响应状态" width="120">
        </el-table-column>
				<el-table-column prop="name" label="当前处理人" width="120">
        </el-table-column>
				<el-table-column prop="name" label="操作" width="120">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderList",
  data() {
    return {
      ruleForm: {
        gdly: "",
        gzqy: "",
        gzsb: "",
				value1:"",
				value2:''
      },
      tableData: [
			{
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
				{
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
				{
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  methods: {
    searchNow() {
      console.log(this.ruleForm);
    },
  },
};
</script>

<style scoped lang="less">
@import "@/assets/style/table.less";
::v-deep .el-select-dropdown {
  border: 1px solid #00e7e7;
}
::v-deep .el-select {
  width: 180px;
}
.dd .btnList{
	margin-bottom: 0;
}
::v-deep .el-form {
  display: flex;
  flex-wrap: wrap;
  padding-left: 35px;
}
::v-deep .el-form-item {
  display: flex;
  margin-right: 30px;
  color: white;
}
::v-deep .el-date-editor.el-input {
  width: 200px;
}
.dd .btnList .el-button {
  background-color: #00e7e7;
}
</style>